<template>
  <a-card title="设备备品备件管理">
    <a-table :columns="columns" :dataSource="sparePartsData" rowKey="partId" bordered>
      <template #bodyCell="{ column, text, record }">
        <span v-if="column.dataIndex === 'action'">
          <a-button @click="viewDetails(record)" style="margin-right: 10px">查看详细</a-button>
        </span>
      </template>
    </a-table>

    <div style="margin-top: 20px">
      <a-button type="primary" @click="addSparePart">新增备件</a-button>
      <a-button type="danger" @click="deleteSparePart">删除备件</a-button>
      <a-button @click="modifySparePart">修改备件</a-button>
      <a-button @click="exportSparePartReport">导出备件报告</a-button>
    </div>

    <a-modal :open="isDetailVisible" title="备件详细信息" @cancel="isDetailVisible = false" @close="isDetailVisible = false" :footer="null">
      <a-form>
        <a-form-item label="备件编号">
          <a-input v-model="detailData.partId" placeholder="请输入备件编号" />
        </a-form-item>
        <a-form-item label="备件名称">
          <a-input v-model="detailData.partName" placeholder="请输入备件名称" />
        </a-form-item>
        <a-form-item label="设备关联">
          <a-input v-model="detailData.deviceAssociation" placeholder="请输入设备关联" />
        </a-form-item>
        <a-form-item label="库存数量">
          <a-input v-model="detailData.stockQuantity" placeholder="请输入库存数量" />
        </a-form-item>
        <a-form-item label="采购阈值">
          <a-input v-model="detailData.purchaseThreshold" placeholder="请输入采购阈值" />
        </a-form-item>
        <a-form-item label="采购日期">
          <a-input v-model="detailData.purchaseDate" placeholder="请输入采购日期" />
        </a-form-item>
        <a-form-item label="使用状态">
          <a-input v-model="detailData.usageStatus" placeholder="请输入使用状态" />
        </a-form-item>
      </a-form>
      <a-button type="primary" @click="submitDetails">保存</a-button>
    </a-modal>
  </a-card>
</template>

<script setup>
  import { ref } from 'vue';

  // 备件数据
  const sparePartsData = ref([
    { partName: '备件A', partId: 'BA123', specification: 'X12', supplier: '供应商1', stockQuantity: 50, purchaseThreshold: '正常' },
    { partName: '备件B', partId: 'BA456', specification: 'X34', supplier: '供应商2', stockQuantity: 20, purchaseThreshold: '预警' },
    { partName: '备件C', partId: 'BA789', specification: 'X56', supplier: '供应商3', stockQuantity: 10, purchaseThreshold: '预警' },
    { partName: '备件D', partId: 'BA321', specification: 'X78', supplier: '供应商4', stockQuantity: 70, purchaseThreshold: '正常' },
    { partName: '备件E', partId: 'BA654', specification: 'X90', supplier: '供应商5', stockQuantity: 15, purchaseThreshold: '正常' },
  ]);

  // 列配置
  const columns = [
    { title: '备件名称', dataIndex: 'partName', key: 'partName' },
    { title: '备件编号', dataIndex: 'partId', key: 'partId' },
    { title: '规格型号', dataIndex: 'specification', key: 'specification' },
    { title: '供应商', dataIndex: 'supplier', key: 'supplier' },
    { title: '库存数量', dataIndex: 'stockQuantity', key: 'stockQuantity' },
    { title: '采购阈值', dataIndex: 'purchaseThreshold', key: 'purchaseThreshold' },
    { title: '操作', dataIndex: 'action', key: 'action' }, // 操作列
  ];

  // 状态管理
  const isDetailVisible = ref(false);
  const detailData = ref({});

  // 查看详细信息
  const viewDetails = (record) => {
    detailData.value = { ...record }; // 设置详细信息
    isDetailVisible.value = true; // 显示弹窗
  };

  // 新增备件
  const addSparePart = () => {
    console.log('新增备件');
  };

  // 删除备件
  const deleteSparePart = () => {
    console.log('删除备件');
  };

  // 修改备件
  const modifySparePart = () => {
    console.log('修改备件');
  };

  // 导出备件报告
  const exportSparePartReport = () => {
    console.log('导出备件报告');
  };

  // 提交详细信息
  const submitDetails = () => {
    console.log('保存备件详细信息', detailData.value);
    isDetailVisible.value = false; // 关闭弹窗
  };
</script>

<style scoped>
  button {
    margin-right: 10px; /* 按钮间隔设置为10px */
  }
</style>
